<template>
  <div>
    <van-nav-bar title="我的银行卡">
      <img
        slot="left"
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        alt=""
        @click="leftClick"
      />
    </van-nav-bar>

    <van-tabs
      v-model="active"
      animated
      background="#efefef"
      color="red"
      title-active-color="red"
      title-inactive-color="#444"
    >
      <!-- 信用卡 -->
      <van-tab title="信用卡">
        <div class="card-xin">
          <!-- top: -(110 * index) + 'px', -->

          <van-collapse v-model="activeNames" accordion :border="false">
            <van-collapse-item name="1">
              <div class="card" slot="title">
                <div class="card-item">
                  <!-- 6 -->
                  <img
                    src="../../assets/image/logo.png"
                    width="38"
                    height="38"
                    alt=""
                  />
                  <div class="card-bank">
                    <p class="bank-name">
                      中国工商银行
                      <!-- {{ item.bankName }} -->
                    </p>
                    <p class="bank-type">充值卡</p>
                  </div>
                  <div class="card-right">
                    <p class="crad-no">
                      ****&nbsp;&nbsp; 9858
                      <!-- {{ item.cardNo | getCrad }} -->
                    </p>
                    <!--  v-if="item.idDef === '1'" -->
                    <p class="crad-ka">默认卡</p>
                  </div>
                </div>
                <div class="card-itembtn">
                  <div class="card-item-botton">
                    <!-- <span>111</span> -->
                    <p>111</p>
                  </div>
                </div>
              </div>
              <!-- 隐藏 -->
              <div class="card-botton">
                <div class="card-botton-item">
                  <img
                    src="~assets/image/icon_card_item1.png"
                    width="20"
                    height="20"
                    alt=""
                  />
                  <p class="card-botton-item-center">设置默认卡</p>
                  <van-switch v-model="checked" size="14px" />
                </div>
                <div class="card-botton-xian"></div>
                <div class="card-botton-item">
                  <img
                    src="~assets/image/icon_card_item2.png"
                    width="20"
                    height="20"
                    alt=""
                  />
                  <p class="card-botton-item-center">修改信息</p>
                  <img
                    class="card-botton-right"
                    src="~assets/image/arr_rigth.png"
                    width="7"
                    height="12"
                    alt=""
                  />
                </div>
                <div class="card-botton-xian"></div>
                <div class="card-botton-item">
                  <img
                    src="~assets/image/icon_card_item3.png"
                    width="20"
                    height="20"
                    alt=""
                  />
                  <p class="card-botton-item-center">解除绑卡</p>
                  <img
                    class="card-botton-right"
                    src="~assets/image/arr_rigth.png"
                    width="7"
                    height="12"
                    alt=""
                  />
                </div>
                <div class="card-botton-xian xian"></div>
              </div>
            </van-collapse-item>
            <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
            <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
          </van-collapse>
          <!-- 卡片 -->
        </div>
      </van-tab>
      <!-- 银行卡 -->
      <van-tab title="银行卡">银行卡</van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {
  queryAllBankCardInfoApi,
  queryCardPicApi,
  queryDelBankCrad,
  queryModifyDefaultWithdrawalsCardInfoApi,
} from "network/ApiServe";

export default {
  name: "MyBankh",
  filters: {
    getCrad(name) {
      return name.toString().substring(name.toString().length - 4);
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    this.userId = localStorage.getItem("userId");
  },
  data() {
    return {
      active: 0,
      CreditCardList: [],
      StorageCardList: [],

      loading: false,
      finished: false,

      checked: true,
      activeNames: ["1"],
    };
  },
  mounted() {
    this.getAllBankCard();
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    //获取银行卡
    getAllBankCard() {
      let _this = this;
      queryAllBankCardInfoApi(_this.token)
        .then((res) => {
          if (res.resp_code === "000000") {
            _this.CreditCardList = [];
            _this.StorageCardList = [];
            res.result
              .map((item) => {
                queryCardPicApi().then((ress) => {
                  if (ress.resp_code === "000000") {
                    ress.result.map((items) => {
                      if (item.bankName == items.bank_name) {
                        item.background = items.background;
                        item.bank_acronym = items.bank_acronym;
                      }
                    });
                    if (item.nature.indexOf("贷") > -1) {
                      _this.CreditCardList.push(item);
                    }

                    if (item.nature.indexOf("借") > -1) {
                      _this.StorageCardList.push(item);
                    }
                    console.log("_this.CreditCardList:", _this.CreditCardList);
                    console.log(
                      "_this.StorageCardList:",
                      _this.StorageCardList
                    );
                  }
                });
              })

              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    cardItemClick(item, index) {
      console.log(index);
    },

    onLoad() {
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        // if (this.list.length >= 40) {
        //   this.finished = true;
        // }
      }, 1000);
    },
  },
};
</script>
<style>
</style>
<style scoped>
.card-xin {
  background-color: #efefef;
}
.bank {
  margin-top: 10px;
  height: 170px;

  margin-left: 16px;
  margin-right: 16px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background-color: red;
}
.crad {
  display: flex;
  color: #fff;
  margin: 15px;
}
.crad-left img {
  background-color: #fff;
  padding: 5px;
  border-radius: 50%;
}
.bank-img {
  z-index: 99;
  opacity: 0.14;
  position: absolute;

  bottom: -86px;
  right: -110px;
}
.top-bank {
  position: relative;
}
.crad-center {
  flex: 1;
  margin-left: 12px;
}
.bank-name {
  font-weight: 600;
  font-size: 18px;
}

.crad-no {
  font-size: 16px;
}
.crad-ka {
  margin-top: 5px;
  opacity: 0.8;
  font-size: 11px;
  color: #fff;
  border: 1px solid #fff;
  padding: 2px 3px;
  border-radius: 8px;
  text-align: center;
}
.cardtype {
  font-size: 12px;
  opacity: 0.8;
  color: #fff;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.top {
  top: -110px;
}
/* card */
.card-xin {
  margin-top: 10px;
}
.card {
  height: 170px;
  margin-bottom: 5px;

  background-color: red;
  border-radius: 8px;
  box-shadow: red 0px -1px 5px 2px;
}

.card-botton-item {
  display: flex;
  align-items: center;
  margin-left: 18px;
  height: 45px;
}
.card-botton-item-center {
  flex: 1;
  margin-left: 11px;
  font-size: 15px;
  color: #121212;
}
.card-botton-xian {
  margin-left: 45px;
  height: 1px;
  background-color: #ccc;
}
.van-switch,
.card-botton-right {
  margin-right: 18px;
}
.card-item {
  display: flex;
  align-items: center;
  padding-top: 18px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
  color: #fff;
}
.card-bank {
  margin-left: 10px;
  flex: 1;
  font-size: 18px;
}
.bank-type {
  margin-top: 3px;
  font-size: 16px;
  opacity: 0.8;
}
.card-itembtn {
  width: 100%;
  height: 65%;
  display: flex;
  flex-direction: row-reverse;
}
.card-item-botton {
  width: 110px;
  height: 85px;
  background-image: url("../../assets/image/img_card_bg_item.png");
  background-repeat: no-repeat;
  background-size: 100%;
  color: #fff;
  font-size: 16px;
  margin-top: 25px;
}
.card-item-botton p {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
}
.xian {
  margin-bottom: 50px;
}
.van-collapse-item /deep/ .van-cell {
  background: none;
}

.van-collapse-item /deep/ .van-cell__right-icon {
  display: none;
}
</style>